<template>
	<view class="tixian">
		<navbar></navbar>
		<textNavbar myprops="提现"></textNavbar>
		<view class="tixian-top">
			<view class="tixian-top-content">
				<text>我的余额</text>
				<view>￥<text>{{list.price}}</text></view>
			</view>
		</view>
		<view class="tixian-content">
			<view class="tixian-content-k"></view>
			<view class="tixian-content-top">
				<text>提现方式</text>
				<view class="tixian-content-top-check"><uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox></view>
			</view>
			<view class="tixian-content-con">
				<text v-if="radio3 == 0">请输入微信号</text>
				<text v-if="radio3 == 1">请输入支付宝账号</text>
				<text v-if="radio3 == 2">请输入银行卡和开户行</text>
				<view v-if="radio3 == 0">
					<van-field
						:value="wxh"
						label="微信号"
						placeholder="请输入微信号"
						@change="onChange"
					/>
				</view>
				<view v-if="radio3 == 1">
					<van-field
						:value="zfb"
						label="支付宝账号"
						placeholder="请输入支付宝账号"
						@change="onChange1"
					/>
				</view>
				<view v-if="radio3 == 2">
					<van-field
						:value="yhk"
						label="银行卡号"
						placeholder="请输入银行卡号"
						@change="onChange2"
					/>
					<van-field
						:value="khh"
						label="开户行"
						placeholder="请输入开户行"
						@change="onChange3"
					/>
				</view>
			</view>
			<view class="tixian-content-bottom">
				<view class="tixian-content-bottom-top">
					<text>提现金额</text>
					<text class="text1" @click="qbtx">全部提现</text>
				</view>
				<view style="margin-top: 10px;">
					<van-field
						:value="money"
						label="金额"
						placeholder="请输入提现金额"
						@change="onChange4"
					/>
				</view>
			</view>
			<view class="tixian-content-button">
				<van-button type="info" round block @click="tixian">主要按钮</van-button>
			</view>
		</view>
		<van-toast id="van-toast" />
	</view>
	
</template>

<script>
	import { lawyerPriceDetail, cash } from '../../../utils/utils';
	import Toast from '@vant/weapp/dist/toast/toast';
	export default {
		data() {
			return {
				sex: [
					{
						text: '微信',
						value: 0
					}, {
						text: '支付宝',
						value: 1
					}, {
						text: '银行卡',
						value: 2
					},
				],
				radio3: 0, // 选中数据
				wxh: '', // 微信号
				zfb: '', // 支付宝账号
				yhk: '', // 银行卡号
				khh: '', // 开户行
				money: '', // 金额
				list: {}, // 用户数据
			}
		},
		onLoad() {
			lawyerPriceDetail((e) => {
				this.list = e.data
			})
		},
		methods: {
			// 微信号输入框
			onChange(event) {
				// event.detail 为当前输入的值
				this.wxh = event.detail
			},
			// 支付宝输入框
			onChange1(event) {
				// event.detail 为当前输入的值
				this.zfb = event.detail
			},
			// 银行卡输入框
			onChange2(event) {
				// event.detail 为当前输入的值
				this.yhk = event.detail
			},
			// 开户行输入框
			onChange3(event) {
				// event.detail 为当前输入的值
				this.khh = event.detail
			},
			// 金额输入框
			onChange4(event) {
				// event.detail 为当前输入的值
				this.money = event.detail
			},
			// 全部提现
			qbtx () {
				this.money = Number(this.list.price)
			},
			// 提现
			tixian () {
				switch(this.radio3) {
					case 0: {
						if(this.wxh.trim() && this.money.trim()) {
							if (this.money > Number(this.list.price)) {
								Toast('您输入的金额超过了提现金额');
							} else {
								let a = {
									extract_type: 'wx',
									weixin: this.wxh,
									money: this.money,
								}
								cash(a, (e) => {
									console.log('提现',e);
									if (e.status == 200) {
										Toast(e.msg)
										setTimeout(() => {
											uni.redirectTo({
												url: "/pages/Attorney side/property/property"
											})
										},1500)
									} else {
										Toast(e.msg)
									}
								})
							}
						} else {
							Toast('请检查微信号和金额是否都输入了')
						}
						break;
					}
					case 1: {
						if(this.zfb.trim() && this.money.trim()) {
							if (this.money > Number(this.list.price)) {
								Toast('您输入的金额超过了提现金额');
							} else {
								let a = {
									extract_type: 'alipay',
									alipay_code: this.zfb,
									money: this.money,
								}
								cash(a, (e) => {
									console.log('提现',e);
									if (e.status == 200) {
										Toast(e.msg)
										setTimeout(() => {
											uni.redirectTo({
												url: "/pages/Attorney side/property/property"
											})
										},1500)
									} else {
										Toast(e.msg)
									}
								})
							}
						} else {
							Toast('请检查微信号和金额是否都输入了')
						}
						break;
					}
					case 2: {
						if(this.money.trim() && this.yhk.trim() && this.khh.trim()) {
							if (this.money > Number(this.list.price)) {
								Toast('您输入的金额超过了提现金额');
							} else {
								let a = {
									extract_type: 'bank',
									cardnum: this.wxh,
									money: this.money,
									bankname: this.khh
								}
								cash(a, (e) => {
									console.log('提现',e);
									if (e.status == 200) {
										Toast(e.msg)
										setTimeout(() => {
											uni.redirectTo({
												url: "/pages/Attorney side/property/property"
											})
										},1500)
									} else {
										Toast(e.msg)
									}
								})
							}
						} else {
							Toast('请检查微信号和金额是否都输入了')
						}
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tixian {
		width: 100vw;
		height: 100vh;
	}
	.tixian-top{
		width: 100vw;
		height: 100px;
		background-color: #1780ff;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tixian-top-content {
		font-size: 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.tixian-top-content > view > text {
		font-size: 20px;
	}
	
	.tixian-content {
		width: 100vw;
		height: 500px;
		border-radius: 12px;
		background-color: white;
		position: relative;
		left: 0;
		top: -10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tixian-content-k {
		height: 10px;
	}
	.tixian-content-top {
		width: 92vw;
	}
	.tixian-content-top-check {
		margin-left: 40px;
	}
	::v-deep.checklist-content {
		width: 60px;
		height: 25px;
		justify-content: center !important;
	}
	::v-deep.checklist-text {
		font-size: 18px !important;
	}
	
	.tixian-content-con {
		width: 92vw;
		margin-top: 10px;
		padding-bottom: 10px;
	}
	.tixian-content-con > view {
		margin-top: 5px;
	}
	
	.tixian-content-bottom {
		width: 92vw;
		margin-top: 10px;
		padding-bottom: 10px;
	}
	.tixian-content-bottom-top {
		height: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tixian-content-bottom-top > .text1 {
		color: #c5c5c5;
		font-size: 14px;
	}
	
	.tixian-content-button {
		width: 92vw;
		margin-top: 20px;
	}
	
	
	
	
</style>
